<template>
  <ul>
    <li v-for="(item, index) of mvs" :key="index">
      <img :src="item.cover" alt />
      <div class="icon-container">
        <span class="iconfont icon">&#xe612;</span>
        <span>{{item.playCount}}</span>
      </div>
      <div class="text-container">
        <span class="content">{{item.name}}</span>
        <span class="author">{{item.artistName}}</span>
      </div>
    </li>
  </ul>
</template>

<script>
import { SameMvUrlData } from "api/mv.js";
export default {
  name: "SameMv",
  data() {
    return {
      mvs: []
    };
  },
  mounted() {
    this.getSameMv();
  },
  methods: {
    getSameMv() {
      SameMvUrlData(this.$route.params.id).then(res => {
        let {
          data: { mvs }
        } = res;
        this.mvs = mvs;
        this.mvs.forEach(item => {
          let count = item.playCount.toString().length;
          if (count > 5 && count < 8) {
            item.playCount =
              item.playCount.toString().slice(0, count - 4) + "万";
          } else if (count > 8 || count === 8) {
            item.playCount =
              item.playCount.toString().slice(0, count - 8) + "亿";
          }
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "common/scss/mixin.scss";
ul {
  @include display-c;
  flex-direction: column;
  li {
    position: relative;
    @include display-r;
    padding: 15px;
    border-bottom: 1px solid #eee;
    img {
      width: 220px;
      height: 140px;
    }
    .icon-container {
      position: absolute;
      top: 10px;
      left: 120px;
      color: #fff;
      text-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
      .icon {
        font-size: 42px;
      }
      span {
        font-size: 26px;
      }
    }
    .text-container {
      @include display-c;
      padding: 10px 0 10px 20px;
      box-sizing: border-box;
      .content {
        line-height: 40px;
        font-size: 34px;
      }
      .author {
        margin-top: 10px;
        line-height: 40px;
        font-size: 28px;
        color: #888;
      }
    }
  }
}
</style>